import React from 'react';
import { Button, Tabs } from 'antd';
import { WeaTools, WeaLocaleProvider, WeaDialog, WeaNewScroll } from 'ecCom';

const TabPane = Tabs.TabPane;
const getLabel = WeaLocaleProvider.getLabel;
const E8_SYS_COLORS = ['#0070c1', '#cc3432', '#5c64c2', '#50833b', '#874d19', '#f46f43', '#22c9b2', '#b24079', '#83686c', '#666f81', '#627f7e'];

import './style/';

class WeaThemeCenter extends React.Component {
    state = { visible: false, loading: false, tabKey: '', tabKey2: '', themes: [], curTheme: {}, hasRight: false };

    constructor(props) {
        super(props);
        this.getButtons = this.getButtons.bind(this);
        this.onOk = this.onOk.bind(this);
        this.onCancel = this.onCancel.bind(this);
        this.onSetting = this.onSetting.bind(this);
        this.onThemeChange = this.onThemeChange.bind(this);
        this.onColorChange = this.onColorChange.bind(this);
    }

    render() {
        const { visible, loading, tabKey2, themes = [], curTheme = {}, hasRight } = this.state;
        const { templateid: templateid_cur, templatetype: templatetype_cur, color: color_cur, layout: layout_cur } = curTheme;

        const operationComp = hasRight ? <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@0uxxbm`} type="primary" size="small" style={{ margin: '0 18px 5px', borderRadius: '2px' }} onClick={this.onSetting}>{getLabel(633, '管理')}</Button> : '';
        const tabComp = (
            <Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@qqju5b`} type="card" activeKey={tabKey2} onChange={key => this.setState({ tabKey2: key })} tabBarExtraContent={operationComp}>
                {
                    themes.map((themeType) => {
                        const { key, name, data = [] } = themeType;

                        let colorComp = null;
                        if (templatetype_cur == 'ecology8' && tabKey2 == 'ecology') {
                            let colorSelectedStyle = {};
                            if (color_cur) {
                                const _color = color_cur.replace(/[^0-9]/ig, '');
                                const _index = _color == '' ? 0 : parseInt(_color);
                                colorSelectedStyle = { display: 'block', left: 50 * _index + 41, backgroundColor: E8_SYS_COLORS[_index] };
                            }

                            colorComp = (
                                <div className="wea-theme-center-colors">
                                    <div className="wea-theme-center-color-selected" style={colorSelectedStyle} />
                                    {
                                        E8_SYS_COLORS.map((item, index) => (
                                                <div key={index}
                                                  className="wea-theme-center-color"
                                                  style={{ backgroundColor: item }}
                                                  data-index={index == 0 ? '' : index}
                                                  onClick={this.onColorChange}
                                                />
                                            ))
                                    }
                                </div>
                            );
                        }
                        return (
                            <TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@8paygj@${key}`} tab={name} key={key}>
                                <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@f0m8rb@${key}`} height={327}>
                                    <div className="wea-theme-center-items">
                                        {
                                            data.map((theme, index) => {
                                                const { templateid, templatetype, layout, color } = theme;

                                                let previewComp = '';
                                                if (templatetype == 'ecology8') {
                                                    previewComp = <div className="wea-theme-center-preview" dangerouslySetInnerHTML={{ __html: theme.preview }} />;
                                                } else {
                                                    previewComp = <div className="wea-theme-center-preview"><img src={theme.preview} alt={theme.name} /></div>;
                                                }

                                                let selectedComp = '';
                                                if (((templatetype_cur == 'ecology8' || templatetype == 'ECustom') && templateid_cur == templateid && templatetype_cur == templatetype) || (templatetype_cur == 'ecology9' && templatetype_cur == templatetype && ((color_cur && color_cur != '' && color && color != '' && color_cur == color) || ((!color_cur || color_cur == '') && (!color || color == '') && templateid_cur == templateid))) || (layout == '5' && layout == layout_cur)) {
                                                    selectedComp = <img src="/wui/theme/ecology9/image/colors/selected.png" alt="" className="wea-theme-center-selected" />;
                                                }

                                                return (
                                                    <div key={index} className="wea-theme-center-item" onClick={() => this.onThemeChange(theme)}>
                                                        {previewComp}
                                                        <div className="wea-theme-center-title" title={theme.name}>{theme.name}</div>
                                                        {selectedComp}

                                                    </div>
                                                );
                                            })
                                        }
                                    </div>
                                </WeaNewScroll>
                                {
                                    colorComp
                                }
                            </TabPane>
                        );
                    })
                }
            </Tabs>
        );
        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@ue6657`}
              visible={visible}
              loading={loading}
              title={getLabel(27714, '主题中心')}
              icon="wevicon-theme-center"
              iconBgcolor="#a7adb5"
              style={{ width: 644, height: 435 }}
              parentClassName="wea-theme-center"
              mask={false}
              zIndex={100}
              hasScroll={true}
              buttons={this.getButtons()}
              onCancel={this.onCancel}
            >
                <div className="wea-theme-center-body">{tabComp}</div>
            </WeaDialog>
        );
    }

    onShow() {
        this.setState({ visible: true, loading: true });
        WeaTools.callApi('/api/portal/themeCenter/getAllThemes', 'GET', {}).then((result) => {
            const { data = {} } = result;

            const { curTheme = {} } = data;
            const { templatetype, layout } = curTheme;
            this.setState({ loading: false, tabKey2: (layout == '5' || templatetype == 'ECustom') ? 'ts' : 'ecology', ...data });
        });
    }

    getButtons() {
        let buttons = [];
        buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@5affwf`} type="primary" onClick={this.onCancel}>{getLabel(309, '关闭')}</Button>);
        return buttons;
    }

    onOk() {
        this.setState({ visible: false });
    }

    onCancel() {
        this.setState({ visible: false });
    }

    onSetting() {
        window.open('/spa/portal/static4engine/engine.html#/portalengine/portalmaintenance/mainportal', '_blank');
    }

    onThemeChange(theme) {
        const { type, templatetype } = theme;
        const { location } = this.props;
        theme.location = location;

        if (type == 'preview') {
            let redirectUrl = theme.url;
            let width = screen.availWidth - 10;
            let height = screen.availHeight - 60;
            let szFeatures = 'top=0,';
            szFeatures += 'left=0,';
            szFeatures += `width=${width},`;
            szFeatures += `height=${height},`;
            szFeatures += 'directories=no,';
            szFeatures += 'status=yes,';
            szFeatures += 'menubar=no,';
            szFeatures += 'scrollbars=yes,';
            szFeatures += 'resizable=yes';
            window.open(redirectUrl, '', szFeatures);
        } else if (type == 'layout') {
            this.setState({ loading: true });
            doThemeAction('onLayoutChange', { type: theme.layout }, () => this.setState({ loading: false }));
        } else if (templatetype == 'ECustom') {
            this.setState({ loading: true });
            doThemeAction('onThemeTsChange', theme, () => this.setState({ loading: false, curTheme: theme }));
        } else if (templatetype == 'ecology8' || templatetype == 'ecology9') {
            this.setState({ loading: true });
            doThemeAction('onThemeChange', theme, () => this.setState({ visible: false, loading: false, curTheme: theme }));
        }
    }

    onColorChange(e) {
        const { location } = this.props;
        const $obj = jQuery(e.target);
        const index = $obj.attr('data-index');
        jQuery('.wea-theme-center-color-img').css('background', `url(/wui/theme/ecology8/page/images/skin/color${index}_wev8.png)`);
        jQuery('.wea-theme-center-color-selected').css({ display: 'block', 'background-color': $obj.css('background-color') }).animate({ left: $obj.position().left - 5 });

        this.setState({ loading: true });
        doThemeAction('onColorChange', { color: `left${index}`, location }, () => this.setState({ visible: false, loading: false }));
    }
}

export default WeaThemeCenter;
